<template>
    <div class="shareBox">
        <div class="content">
            <div class="content_left relative">
                <loading v-show="pageLoading"></loading>
                <div class="title_box">
                    <div class="file_information">
                        <div class="file_name">
                            <div class="file_icon">
                                <check-icon class="icon-box" :fileData="shareData"></check-icon>
                            </div>
                            <p v-text="shareData.displayName">UWS文件</p>
                        </div>
                        <p class="file_text">
                            <i class="iconfont icon-Group-1"></i>
                            <span v-text="publicFun.rebuildTime(shareData.expireTime,3)">2011-06-10 12:00</span>失效时间：
                            <span>1</span>天后
                        </p>
                    </div>
                    <div class="button_list">
                        <!--<div class="baocun">-->
                        <!--<i class="iconfont icon-icon-"></i>-->
                        <!--<span>保存到网盘</span>-->
                        <!--</div>-->
                        <div class="xiazai" @click="getDownloadLoadLink">
                            <i class="iconfont icon-xiazai"></i>
                            <span>下载</span>
                        </div>
                        <div class="jubao">
                            <i class="iconfont icon-jinggao"></i>
                            <span>举报</span>
                        </div>
                    </div>
                </div>
                <div class="style_tab"></div>
                <div class="content_list">
                    <table class="table-head">
                        <thead>
                        <tr>
                            <td class="checkbox">
                                <input type="checkbox" v-model="isChooseAll" @click="chooseAll($event)"/>
                            </td>
                            <td class="name relative td-title " style="padding-left: 3px;">文件名</td>
                            <td class="size relative td-title text-center">文件大小</td>
                            <td class="status relative td-title text-center">修改时间</td>
                        </tr>
                        </thead>
                    </table>
                    <div class="file-list relative" v-if="!isFileNull">
                        <table>
                            <tbody>
                            <tr v-for="(file,key) in currentFileList" :key="key"
                                :class="chooseFileList.indexOf(file.id) > -1 ? 'active' : ''"
                                @click.right="showRightMenu($event,file)">
                                <td class="checkbox">
                                    <input type="checkbox" @click.stop="chooseFileChange($event,file)"
                                           :checked="chooseFileList.indexOf(file.id) > -1"/>
                                </td>
                                <td class="name pointer" @dblclick="clickName(file)">
                                    <check-icon class="icon-box" :fileData="file"></check-icon>
                                    <p class="fr" v-text="file.name"></p>
                                </td>
                                <td class="size text-center" v-text="publicFun.getFileSize(file.size)"></td>
                                <td class="status text-center">
                                    <span v-text="publicFun.rebuildTime(file.updateTime,3)"></span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="file-null" v-if="isFileNull" align="center">
                        <img class="file-null-icon" src="/icon/file_null.png">
                        <p class="text-center">暂无文件/文件夹</p>
                    </div>

                </div>
            </div>
            <div class="content_right">
                <div class="sharing_person">
                    <div>
                        <head-icon class="fl" size="68px" fontSize="20px" :img="shareData.userLogo"
                                   :name="shareData.userName"
                                   :border="null" :status="false"></head-icon>
                    </div>
                    <p v-text="shareData.userName">陈圆圆</p>
                    <span>分享文件</span>
                </div>
                <div class="files_source">
                    <h3>文件所属组织</h3>
                    <i class="line"></i>
                    <div>
                        <head-icon class="fl company-icon" size="32px" fontSize="12px" :img="shareData.organizationLogo"
                                   :name="shareData.organizationName"
                                   :borderRadius="'0px'" :border="null" :status="true"></head-icon>
                        <span v-text="shareData.organizationName">加优科技有限公司</span>
                    </div>
                </div>
                <div class="client_download">
                    <h3>客户端下载</h3>
                    <i class="line"></i>
                    <div>
                        <div class="windows">
                            <i class="iconfont icon-windows"></i>
                            <p>Windows版</p>
                        </div>
                        <div class="mac">
                            <i class="iconfont icon-macos"></i>
                            <p>MAC版</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import CheckIcon from '@/components/CheckIcon.vue'
  import HeadIcon from '@/components/HeadIcon.vue'
  import Loading from '@/components/Loading.vue'
  import COS from 'cos-js-sdk-v5'

  export default {
    components: {
      CheckIcon,
      HeadIcon,
      Loading
    },
    props: {
      shareData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      fileList: {
        type: Array,
        default: function () {
          return []
        }
      },
      tokenData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      ossKey: {
        type: Array,
        default: function () {
          return []
        }
      },
      token: {
        type: String,
        default: function () {
          return ''
        }
      },
    },
    data() {
      return {
        isFileNull: false,
        pageLoading: false,
        chooseFileData: {},
        isChooseAll: false,
        chooseFileList: [],
        currentFileList: [],
        cos: {}

      };
    },
    watch: {},
    mounted() {
      this.currentFileList = this.fileList
      const that = this
      this.cos = new COS({
        getAuthorization: function (options, callback) {
          // 异步获取临时密钥
          callback({
            TmpSecretId: that.tokenData.credentials.tmpSecretId,
            TmpSecretKey: that.tokenData.credentials.tmpSecretKey,
            XCosSecurityToken: that.tokenData.credentials.sessionToken,
            // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
            // StartTime: data.startTime, // 单位是秒
            ExpiredTime: that.tokenData.expiredTime
          });
        }
      });
    },
    methods: {
      getFolderList: function (fileId) {
        const that = this;
        this.pageLoading = true
        this.$http.post('/pan/getShareSubFiles', {
          fileId: fileId,
          shareId: this.shareData.id,
          token: this.token
        }).then(function (data) {
          that.pageLoading = false
          if (data.data.code === 1) {
            that.currentFileList = that.fileSort(data.data.data.fileRelations)
            that.isChooseAll = false
            if (that.currentFileList.length === 0) {
              that.isFileNull = true
            } else {
              that.isFileNull = false
            }
            that.$emit('folderChange', data.data.data)
          } else {
            that.$message({
              type: 'error',
              message: data.data.msg
            })
            that.currentFileList = []
            that.isFileNull = true
          }
        })
      },
      fileSort: function (list) {
        return list.sort(function (a, b) {
          return b.fileType - a.fileType
        })
      },
      clickName: function (fileData) {
        if (fileData.fileType === 1) {
          this.getFolderList(fileData.id)
        }

      },
      getTime: function () {

      },
      chooseFileChange: function (event, fileData) {
        const index = this.chooseFileList.indexOf(fileData.id)
        if (event.target.checked) {
          if (index === -1) {
            this.chooseFileList.push(fileData.id)
            this.checkChooseAll()
          }
        } else {
          if (index !== -1) {
            this.chooseFileList.splice(index, 1)
            this.checkChooseAll()
          }
        }
      },
      chooseAll: function (event) {
        this.chooseFileList = []
        const that = this
        if (event.target.checked) {
          this.currentFileList.forEach(function (fileData) {
            that.chooseFileList.push(fileData.id)
          })
        }
      },

      checkChooseAll: function () {
        if (this.chooseFileList.length !== 0 && this.chooseFileList.length === this.currentFileList.length) {
          this.isChooseAll = true
        } else {
          this.isChooseAll = false
        }
      },


      getDownloadLoadLink: function () {
        if (this.chooseFileList.length === 0) {
          return this.$message({type: 'error', message: '请选择要下载的文件'})
        }
        const that = this
        this.chooseFileList.forEach(function (id,key) {
          that.makeDownloadLink(id,key)
        })
        // this.$http.post('/pan/file/download/url/v1', {
        //     fileId: this.chooseFileList
        //   }
        // ).then(function (data) {
        //   if (data.data.code === 1) {
        //     that.webDownloadFile(data.data.data)
        //   }
        // })
      },

      makeDownloadLink: function (id,key) {
        console.log(key)
        const fileData = this.currentFileList.find(function (data) {
          return data.id === id
        })
        const bucketData = this.ossKey.find(function (data) {
          return data.relationId === id
        })
        this.cos.getObjectUrl({
          Bucket: bucketData.bucket,
          Region: this.$config.tencentRegion,     /* 存储桶所在地域，必须字段 */
          Key: bucketData.key,
          Sign: true,

        }, function (err, data) {
          if (err) return console.log(err);
          let downloadUrl = data.Url + (data.Url.indexOf('?') > -1 ? '&' : '?') + 'response-content-disposition=' + encodeURIComponent(`attachment; filename="${fileData.name}"`)  // 补充强制下载的参数
          setTimeout(function () {
            window.location.href = downloadUrl
          }, key * 1000)

        });
      },


      webDownloadFile: function (downloadData) {
        // const that = this
        downloadData.forEach(function (data, key) {
          // setTimeout(that.documentDownload(data),1)
          setTimeout(function () {
            window.location.href = data.uri
          }, key * 1000)
        })
      },

    }
  };
</script>

<style scoped lang="css" src="@/assets/css/load-page.css"></style>


<style scoped>
    .file-null {
        width: 100%;
        height: calc(100vh - 250px);
    }

    .file-null p {
        font-size: 14px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
    }

    .file-null-icon {
        margin-top: calc((100vh - 400px) / 2);
        height: 150px;
        width: 150px;
    }

    .company-icon {
        margin-right: 10px;
    }

    .file-box-header .time {
        font-size: 12px;
        color: #F2F5FC;
        letter-spacing: 0.86px;
        padding-left: 81px;
        line-height: 17px;
        margin-top: 6px;
    }

    .file-box-header .folder-icon {
        height: 24px;
        width: 26px;
        margin-top: 0px;
        margin-left: 30px;
        margin-right: 20px;
    }

    .file-box-header h1 {
        line-height: 25px;
        margin-left: 20px;
    }

    .shareBox {
        height: calc(100vh - 60px);
    }

    .content {
        /* height: calc(100% - 60px); */
        height: 100%;
        padding: 20px 20px 18px 20px;
        background: rgb(244, 244, 244);
    }

    .content_left {
        width: calc(100% - 320px);
        height: 100%;
        margin-right: 20px;
        background-color: #fff;
        float: left;
        border-radius: 10px;
        padding: 24px;
        display: flex;
        flex-direction: column;
    }

    .content_left .title_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .content_left .title_box .file_information {
        /* float:left; */
    }

    .content_left .title_box .file_information .file_name .file_icon {
        width: 26px;
        height: 24px;
        display: inline-block;
    }

    .content_left .title_box .file_information .file_name .file_icon img {
        width: 100%;
        height: 100%;
    }

    .content_left .title_box .file_information .file_name p {
        line-height: 24px;
        margin-left: 16px;
        display: inline-block;
        color: #666666;
        font-family: PingFangSC;
        font-size: 14px;
    }

    .content_left .title_box .file_information .file_text {
        margin-top: 10px;
        color: #999999;
        font-size: 12px;
    }

    .content_left .title_box .file_information .file_text i {
        margin-right: 5px;
    }

    .content_left .title_box .button_list {
        height: 32px;
    }

    .iconfont {
        font-size: 14px;
    }

    .content_left .title_box .button_list > div {
        height: 32px;
        border: 1px solid #4690f5;
        font-size: 12px;
        padding: 0 20px;
        border-radius: 2px;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 6px;
        cursor: pointer;
    }

    .content_left .title_box .button_list > div i {
        margin-right: 6px;
        font-size: 14px;
    }

    .content_left .title_box .button_list .baocun {
        background: #4690f5;
        color: #fff;
    }

    .content_left .title_box .button_list .xiazai {
        color: #4690f5;
    }

    .content_left .title_box .button_list .jubao {
        color: #4690f5;
    }

    .content_left .style_tab {
        width: 50px;
        height: 50px;
        margin-bottom: 50px;
    }

    .content_list {
    }

    .content_list .size {
        width: 150px;
    }

    .content_list .file-list {
        height: calc(100vh - 280px);
    }


    .content_list .table-head .td-title:before {
        content: '';
        position: absolute;
        height: 16px;
        top: 9px;
        right: 0px;
        width: 1px;
        background: rgba(226, 226, 226, 1);

    }

    @media screen and (max-width: 1200px) {
        .content {
            width: 1200px !important;
        }
    }

    /* 右侧 */
    .content_right {
        width: 300px;
        height: 100%;
        background-color: #fff;
        float: left;
        border-radius: 10px;
        padding: 20px;
    }

    .content_right .sharing_person {
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    .content_right .sharing_person div {
        width: 68px;
        height: 68px;
        overflow: hidden;
    }

    .content_right .sharing_person div img {
        width: 100%;
        height: 100%;
    }

    .content_right .sharing_person > p {
        margin-top: 14px;
        color: #222222;
        font-size: 18px;
    }

    .content_right .sharing_person > span {
        margin-top: 10px;
        font-size: 12px;
        color: #999999;
    }

    .content_right .files_source {
        margin-bottom: 72px;
    }

    .content_right .files_source h3 {
        color: #222;
        font-weight: bold;
    }

    .content_right .files_source .line {
        width: 100%;
        height: 1px;
        display: block;
        background-color: #e5e5e5;
        margin: 20px 0;
    }

    .content_right .files_source > div {
        width: 100%;
        height: 54px;
        background-color: #f4f4f4;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content_right .files_source > div img {
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }

    .content_right .files_source > div span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333;
    }

    .content_right .client_download {
    }

    .content_right .client_download h3 {
        color: #222;
        font-weight: bold;
    }

    .content_right .client_download .line {
        width: 100%;
        height: 1px;
        display: block;
        background-color: #e5e5e5;
        margin: 20px 0;
    }

    .content_right .client_download > div {
        display: flex;
    }

    .content_right .client_download > div .windows {
        flex: 1;
        text-align: center;
        color: #999999;
    }

    .content_right .client_download > div .windows i {
        font-size: 28px;

    }

    .content_right .client_download > div .windows p {
        font-size: 12px;
        margin-top: 6px;
    }

    .content_right .client_download > div .windows:hover i {
        color: #5d91f8;
    }

    .content_right .client_download > div .mac {
        flex: 1;
        text-align: center;
        color: #999999;
    }

    .content_right .client_download > div .mac i {
        font-size: 28px;
    }

    .content_right .client_download > div .mac p {
        font-size: 12px;
        margin-top: 6px;
    }

    .content_right .client_download > div .mac:hover i {
        color: #5d91f8;
    }

    .ivu-table-column-MxvIR0 .ivu-table-cell {
        width: 100px;
        border-left: 1px solid #e2e2e2;
        border-right: 1px solid #e2e2e2;
    }

    thead {
        background-color: #fff;
    }

    /* 滚动条部分样式 */
    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        /**/
    }

    *::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 2px;
    }

    *::-webkit-scrollbar-thumb {
        background: #dcdfe8;
        border-radius: 10px;
    }

    *::-webkit-scrollbar-corner {
        background: #179a16;
    }
</style>
